<template>
    <div>
        <a-card title="数据可视化">
            <a-row>
                <a-col :span="12">
                    <a-card title="景区数量统计">
                        <div id="main" style="width: 100%;height:400px;"></div>
                    </a-card>
                </a-col>
                <a-col :span="12">
                    <a-card title="注册人数统计">
                        <div id="main2" style="width: 100%;height:400px;"></div>
                    </a-card>
                </a-col>
            </a-row>
            <a-row>
                <a-col :span="12">
                    <a-card title="评论词云">
                        <div id="main3" style="width: 100%;height:400px;"></div>
                    </a-card>
                </a-col>
                <a-col :span="12">
                    <a-card title="评论数量统计">
                        <div id="main4" style="width: 100%;height:400px;"></div>
                    </a-card>
                </a-col>
            </a-row>
        </a-card>

    </div>
</template>
 
<script setup>
import { ref, onMounted } from 'vue'
import { getstaticApi } from '/@/api/admin/thing'
import * as echarts from 'echarts'
import 'echarts-wordcloud';

let data = ref([])
onMounted(() => {
    getstaticApi().then(res => {
        data.value = res.data
        console.log(res.data)
        console.log(data.value)
        let myChart1 = echarts.init(document.getElementById('main'));
        let myChart2 = echarts.init(document.getElementById('main2'));
        let myChart3 = echarts.init(document.getElementById('main3'));
        let myChart4 = echarts.init(document.getElementById('main4'));
        let option1 = {
            title: {
                text: '景点统计'
            },
            tooltip: {},
            legend: {
                data: ['景点数']
            },
            xAxis: {
                data: ['上架', '下架', '总数']
            },
            yAxis: {},
            series: [{
                name: '订单量',
                type: 'bar',
                data: [data.value.thing_status_0_count, data.value.thing_status_1_count, data.value.thing_count]
            }]
        };
        let option2 = {
            title: {
                text: '景区用户统计'
            },
            tooltip: {},
            legend: {
                data: ['每日增加'],
                left: 'right'
            },
            xAxis: {
                data: data.value.user.map(item => item.date)
            },
            yAxis: {},
            series: [{
                name: '每日增加',
                type: 'line',
                data: data.value.user.map(item => item.count)

            }]
        };
        myChart3.setOption({
            series: [{
                type: 'wordCloud',

                // The shape of the "cloud" to draw. Can be any polar equation represented as a
                shape: 'circle',
                keepAspect: false,
                left: 'center',
                top: 'center',
                width: '90%',
                height: '90%',
                right: null,
                bottom: null,
                sizeRange: [12, 60],
                rotationRange: [-90, 90],
                rotationStep: 45,
                gridSize: 8,
                drawOutOfBound: false,
                shrinkToFit: false,
                layoutAnimation: true,
                textStyle: {
                    fontFamily: 'sans-serif',
                    fontWeight: 'bold',
                    color: function () {
                        return 'rgb(' + [
                            Math.round(Math.random() * 160),
                            Math.round(Math.random() * 160),
                            Math.round(Math.random() * 160)
                        ].join(',') + ')';
                    }
                },
                emphasis: {
                    focus: 'self',
                    textStyle: {
                        textShadowBlur: 10,
                        textShadowColor: '#333'
                    }
                },
                data: data.value.word.map(item => {
                    return {
                        name: item.word,
                        value: item.count
                    }
                })
            }]
        });
        let option4 = {
            title: {
                text: '评论数量统计'
            },
            tooltip: {},
            legend: {
                data: ['评论数']
            },
            xAxis: {
                data: data.value.comment_daily.map(item => item.date)
            },
            yAxis: {},
            series: [{
                name: '评论数',
                type: 'bar',
                data: data.value.comment_daily.map(item => item.count)
            }]
        }
        myChart1.setOption(option1);
        myChart2.setOption(option2);
        myChart4.setOption(option4);
        // myChart3.setOption(option3);
    })
})

</script> 
 
<style scoped></style>